<template>
  <div class='article-container'>
    <el-card class="box-card">
      <!-- 面板组件 -->
       <div slot="header" class="clearfix">
       <my-breadcrumb></my-breadcrumb>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 组件 -->
          <my-status v-model="form.status"></my-status>
        <my-channel v-model="form.channelId"></my-channel>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date"
                style="width: 100%;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button
            type="primary"
            :loading='isLoading'
            @click="hQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
     <!-- 表格 -->
      <!-- 表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        根据查询条件，找到{{total_count}}条记录
      </div>
      <div>
        <!-- data: 指定数据源
          data: [ {属性名1：值, 属性名2：值} , {属性名1：值, 属性名2：值} ]

          el-table-column:
            -prop:与数据源中属性名对应
            -label：表头
         -->
        <el-table
          v-loading="isLoading"
          :data="articles"
          style="width: 100%">
          <el-table-column
            label="封面"
            width="250">
            <template slot-scope="scope">
              <!-- slot-scope:作用域插槽，则这个template内部，可以通过scope.row来获取当前行的数据 -->
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.cover.images[0]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
              </el-image>
              <!-- {{scope.row.cover.images[0]}} 图片的路径-->
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="250">
          </el-table-column>
          <el-table-column
            label="状态"
            width="250">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
              <el-tag v-else-if="scope.row.status===1" type="success">待审核</el-tag>
              <el-tag v-else-if="scope.row.status===2">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
              <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
              <el-tag v-else type="danger">unknow</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间"
            width="250">
          </el-table-column>
          <el-table-column
            prop="address"
            width="250"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit" circle
                @click="hEdit(scope.$index, scope.row)"></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete" circle
                @click="hDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件
          1. total是总条数。
          2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
          3. page-size: 默认10，它会以每页10条进行计算总页数
          -->
        <el-pagination
          :disabled='isLoading'
          background
          layout="prev, pager, next"
          :page-size="10"
          @current-change="hPageChange"
          :total="total_count">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
// 导入

import MyStatus from './status.vue'

// 注册组件
export default {
  components: {
    MyStatus
  },
  name: 'articles',
  data () {
    return {
      isLoading: false, // 加载中 loading
      articles: [], // 文章列表
      total_count: 0, // 总条数
      page: 1, // 当前要查询的页码数
      form: {
        status: null, // 文章的状态 默认为全部
        channelId: null, // 如果初始值为null，则axios发请求时不会传这个参数 频道
        dateRange: null // 日期时间的区间
      }
    }
  },
  created () {
    this.doQuery()
  },
  methods: {
    // 处理获取参数查询的方法
    buildParam () {
    // 解构赋值
      const { status, dateRange, channelId } = this.form
      const paramsObj = {
        page: this.page
      }
      // axios的一个特点 如果传的值为null,它会省略这个参数(不传)
      // 检查文章的状态
      paramsObj.status = status
      // 检查频道
      paramsObj.channelId = channelId
      //  检查处理日期时间
      if (dateRange) {
        paramsObj.begin_pubdate = dateRange[0] // 开始时间
        paramsObj.end_pubdate = dateRange[1] // 结束时间
      }
      return paramsObj
    },
    async doQuery () {
      // 1. 组装参数
      const paramsObj = this.buildParam()
      this.isLoading = true
      // 2. 带上参数，发请求
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: paramsObj
        })
        // console.log(res)
        // 3. 更新数据
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count //   总条数
        // 4. 本次查询结束
        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.$message.error('查询出错')
        // 3.更新数据
        this.articles = []
        this.total_count = 0
        // 4.查询结束
        this.isLoading = false
      }
    },
    hQuery () {
      this.doQuery()
    }, // curPage 当前页
    hPageChange (curPage) {
      console.log('点击了分页', curPage)
      // 更新页码
      this.page = curPage
      // 重新发请求
      this.doQuery()
    },
    //  编辑按钮  添加路由跳转功能
    hEdit (index, row) {
      // console.log('当前的行号是', index, '当前的行是', row)
      this.$router.push('/edit/' + row.id.toString())
    },
    //  用户删除文章  row代表当前行的数据
    // 获取当前的id调用 删除事件传递参数
    hDelete (index, row) {
      // 对于用户的退出，数据的删除操作，一般要询问一下（确认对话框
      // console.log(index, row)
      this.$confirm('你真的要删除吗?').then(() => {
        // console.log('要删除的数据的id是', row.id)
        // console.log(row.id.toString())
        this.doDelete(row.id.toString())
        this.$message.success('删除成功')
      }).catch(() => {
      // 取消不做任何操作
      })
    },
    // 删除事件 获取到要删除的行数就行删除  目前只能删除草稿
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        // 重新渲染页面
        this.doQuery()
      } catch (err) {
        this.$message.error('删除失败')
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>
